<template>
  <div class="icon-list">
    <router-link class="ball-list" v-for="item in ballList" :key="item.id" :to="item.url">
      <div class="content">
        <img :src="item.iconUrl" alt />
        <span class="name">{{item.name}}</span>
      </div>
    </router-link>
  </div>
</template>
<script>
import { getBall } from "@/api/index.js";
export default {
  data() {
    return {
      ballList: {}
    };
  },
  async mounted() {
    let res = await getBall();
    this.ballList = res.data.data;
    console.log(this.ballList);
  }
};
</script>
<style scoped lang="less">
.icon-list::-webkit-scrollbar {
  width: 0 !important;
}
.icon-list {
  width: 7.5rem;
  height: 1.7rem;
  padding: 0.2rem;
  display: flex;
  overflow: scroll;
  .ball-list {
    // display: flex;
    flex-direction: column;
    // width: 3rem;
    align-items: center;
    .content {
      width: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 0.8rem;
        height: 0.8rem;
        border: 1px solid #ccc;
        border-radius: 50%;
      }
      .name {
        font-size: 0.2rem;
      }
    }
  }
}
</style>